<template>
  <div>
    <div class="JudgePersonalStatement">
      <h1>个人学年总结</h1>
      <h2>思想政治</h2>
      <el-table :data="PersonalStatement" style="width: 100%" :key="statementId">
        <el-table-column prop="date" label="时间">{{ user.date }}</el-table-column>
        <el-table-column prop="spot" label="地点">{{ user.spot }}</el-table-column>
        <el-table-column prop="level" label="活动级别">{{ user.level }}</el-table-column>
        <el-table-column prop="role" label="角色">{{ user.role }}</el-table-column>
        <el-table-column prop="name" label="活动名称">{{ user.name }}</el-table-column>
      </el-table>

      <h2>行为规范</h2>
      <el-table :data="PersonalStatement" style="width: 100%" :key="statementId">
        <el-table-column prop="behaviour" >{{ user.behaviour }}</el-table-column>
      </el-table>

      <h2>学习态度</h2>
      <el-table :data="PersonalStatement" style="width: 100%" :key="statementId">
        <el-table-column prop="study" >{{ user.study }}</el-table-column>
      </el-table>

      <h2>身体健康</h2>
      <el-table :data="PersonalStatement" style="width: 100%" :key="statementId">
        <el-table-column prop="health" >{{ user.health }}</el-table-column>
      </el-table>

    </div>
    <div class="update">
      <el-form ref="form" :model="user" :rules="rules" label-width="100px">
        <el-form-item v-for="(user,statementId) in userList"
                      :key="statementId" prop="mark">
          评分
          <el-input class="test" v-model="user.psmark" placeholder="请输入分数"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script>
import { getPSInfo } from "@/api/login";
import { updateJPSinfo } from "@/api/login";
export default {
  name: "JudgePersonalStatement",
  data() {
    return {
      userList:[{user:1,statementId:1}],//这是测试用例
      user: {
        username:"",
        statementId: "",
        date:"",
        spot:"",
        level:"",
        role:"",
        name:"",
        behavior:"",
        study:"",
        health:"",
        psmark:""
      },
      rules: {
        mark: [{ required: true, message: "请输入分数", trigger: "blur" }],
      },
    };
  },
  mounted() {
    getPSInfo().then((res) => {
      this.user.username = res.data.username;
      this.user.statementId = res.data.statementId;
      this.user.date = res.data.date;
      this.user.spot = res.data.spot;
      this.user.level = res.data.level;
      this.user.role = res.data.role;
      this.user.name = res.data.name;
      //是data标签下的内容，在api取名时注意
    });
  },
  methods:{
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          //发起网络请求登录，如果登录成功，跳转到主页面
          //操作与login api联系
          updateJPSinfo(this.user.username,this.user.researchId,this.user.rsmark).then(res =>{
            console.log(res.data.accessToken)
            setToken(res.data.accessToken)
          }).catch(() => {
            // 上传，
            this.loading = true
          })
        }
      })
    },
  }
}
</script>

<style scoped>
.JudgePersonalStatement{
  padding: 20px;
}
.test{
  width: 150px !important;
}
.left{
  text-align: left;
  margin-left: 100px;
  margin-right: 50px;
}
</style>